<template>
  <el-scrollbar class="scrollbar">
    <div class="padding">
      <div class="search-form">
        <el-form inline>
          <year-month-picker v-model="time"></year-month-picker>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="grid-content">
        <grid-item-one></grid-item-one>
        <grid-item-two class="mt-4" title="产值指标趋势"></grid-item-two>
        <div class="flex gap-4 mt-4 w-full" ref="fakeGapWrap">
          <bar-chart class="flex-1" title="产值排名" unit="亿元"></bar-chart>
          <bar-chart class="flex-1" title="产值单耗排名" unit="千克标准煤/万元"></bar-chart>
          <bar-chart class="flex-1" title="产值电耗排名" unit="千瓦时/万元"></bar-chart>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemTwo from './grid-item-two'
import BarChart from './bar-chart'
import TimePicker from '@/mixins/time-picker'

import mixinFakeGap from '@/mixins/mixin-fake-gap'

export default {
  name: 'energy-efficiency-analysis-production-value',
  mixins: [TimePicker, mixinFakeGap],
  components: {
    GridItemOne,
    GridItemTwo,
    BarChart
  },
  data () {
    return {}
  },
  updated () {
    const wrap = this.$refs.fakeGapWrap;
    if (wrap) {
      const els = Array.from(wrap.querySelectorAll('.content-block'));
      els.forEach((el, index) => {
        index > 0 && this.fixFakeGap('marginLeft', el);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    ::v-deep .content-block {
      background: white;
      border-radius: 4px;
    }
    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }
  }
</style>
